import React from 'react';

// 添加webpack的require.context类型声明
declare const require: {
  context: (path: string, deep?: boolean, filter?: RegExp) => any;
};

// 图标组件注册表 - 用于缓存已加载的图标组件
export const iconRegistry: Record<string, React.ComponentType<any>> = {};

// 自动注册所有图标组件
const registerAllIcons = () => {
  try {
    // 使用webpack的require.context来自动发现和导入所有SVG图标
    const iconsContext = require.context('@/assets/icons', false, /\.svg$/);
    
    // 注册每个发现的图标
    iconsContext.keys().forEach((iconPath: string) => {
      try {
        // 从路径中提取图标名称，例如 './home.svg' -> 'home'
        const iconName = iconPath.replace(/^\.\//, '').replace(/\.svg$/, '').toLowerCase();
        
        // 导入图标组件
        const IconComponent = iconsContext(iconPath).default;
        
        // 注册到注册表中
        iconRegistry[iconName] = IconComponent;
      } catch (error) {
        console.warn(`注册图标 ${iconPath} 失败:`, error);
      }
    });
    
    console.log(`成功注册了 ${Object.keys(iconRegistry).length} 个图标组件`);
  } catch (error) {
    console.error('自动注册图标失败:', error);
    
    // 如果自动注册失败，手动注册一些核心图标作为备用
    registerCoreIconsAsFallback();
  }
};

// 手动注册核心图标作为备用方案
const registerCoreIconsAsFallback = () => {
  try {
    // 手动导入一些核心图标
    import('@/assets/icons/aim.svg').then(module => {
      iconRegistry['aim'] = module.default;
    }).catch(err => console.warn('导入aim图标失败:', err));
    
    import('@/assets/icons/home-filled.svg').then(module => {
      iconRegistry['home-filled'] = module.default;
      iconRegistry['home'] = module.default; // 为home也注册同一个图标
    }).catch(err => console.warn('导入home图标失败:', err));
    
    import('@/assets/icons/user.svg').then(module => {
      iconRegistry['user'] = module.default;
    }).catch(err => console.warn('导入user图标失败:', err));
    
    import('@/assets/icons/setting.svg').then(module => {
      iconRegistry['setting'] = module.default;
    }).catch(err => console.warn('导入setting图标失败:', err));
    
    import('@/assets/icons/bell.svg').then(module => {
      iconRegistry['bell'] = module.default;
    }).catch(err => console.warn('导入bell图标失败:', err));
    
    import('@/assets/icons/menu.svg').then(module => {
      iconRegistry['menu'] = module.default;
    }).catch(err => console.warn('导入menu图标失败:', err));
    
    import('@/assets/icons/search.svg').then(module => {
      iconRegistry['search'] = module.default;
    }).catch(err => console.warn('导入search图标失败:', err));
    
    console.log('已注册核心图标作为备用');
  } catch (error) {
    console.error('注册备用图标失败:', error);
  }
};

// 图标管理器类
export class IconManager {
  // 获取图标组件
  static getIconComponent(iconName: string): React.ComponentType<any> | null {
    // 清理图标名称，移除可能的前缀和后缀，并转换为小写
    const cleanIconName = iconName.replace(/^ele-/, '').toLowerCase().replace(/\.svg$/, '');
    
    // 直接从注册表中获取
    return iconRegistry[cleanIconName] || null;
  }

  // 尝试动态加载单个图标
  static async loadIconDynamically(iconName: string): Promise<React.ComponentType<any> | null> {
    try {
      const cleanIconName = iconName.replace(/^ele-/, '').toLowerCase().replace(/\.svg$/, '');
      
      // 尝试直接导入
      try {
        const IconModule = await import(`@/assets/icons/${cleanIconName}.svg`);
        const IconComponent = IconModule.default;
        iconRegistry[cleanIconName] = IconComponent;
        console.log(`成功动态加载图标: ${cleanIconName}`);
        return IconComponent;
      } catch (innerError) {
        console.warn(`直接导入图标 ${cleanIconName} 失败:`, innerError);
        
        // 尝试查找相似名称的图标
        const similarIcons = Object.keys(iconRegistry).filter(key => 
          key.includes(cleanIconName) || cleanIconName.includes(key)
        );
        
        if (similarIcons.length > 0) {
          console.log(`找到相似图标: ${similarIcons[0]}`);
          return iconRegistry[similarIcons[0]];
        }
      }
      
      return null;
    } catch (error) {
      console.warn(`动态加载图标 ${iconName} 失败:`, error);
      return null;
    }
  }

  // 创建图标元素
  static createIconElement(iconName: string): React.ReactNode {
    try {
      // 确保iconName是字符串
      if (typeof iconName !== 'string') {
        console.warn('图标名称必须是字符串');
        return 'appstore'; // 使用Ant Design内置图标作为回退
      }
      
      // 尝试从注册表中获取图标组件
      const IconComponent = IconManager.getIconComponent(iconName);
      
      if (IconComponent) {
        // 如果找到对应的图标组件，直接渲染
        return <IconComponent width={16} height={16} />;
      } else {
        // 对于未找到的图标，触发异步加载（不阻塞当前渲染）
        IconManager.loadIconDynamically(iconName).catch(err => {
          // 静默失败，因为这不会影响当前渲染
        });
        
        // 返回图标名称作为字符串，让Ant Design Pro尝试将其作为内置图标处理
        const cleanIconName = iconName.replace(/^ele-/, '').toLowerCase().replace(/\.svg$/, '');
        return cleanIconName;
      }
    } catch (error) {
      console.error(`处理图标 ${iconName} 时出错:`, error);
      return 'appstore'; // 使用Ant Design内置图标作为回退
    }
  }
}

// 在模块加载时自动注册所有图标
registerAllIcons();

// 默认导出IconManager
export default IconManager;